<template>
    <div  class="actiity">
 
 
 
       <!-- 头部模块 -->
     <div class="header">
         <ul class="left">
             <li></li>
             <li></li>
             <li></li>
             <li></li>
         </ul>
         <div class="title">
             <span>学生活跃度   </span>
         </div>
         <ul class="right">
             <li></li>
             <li></li>
             <li></li>
             <li></li>
         </ul>
     </div>
     <!-- 主体模块 -->
     <div class="main">
         <!-- 左侧模块 -->
         <div class="main-left">
             <!-- 完成率 -->
             <div class="completion">
                 <div class="completion-content">
                     <div class="rate">
                         <h5><span>完成率</span></h5>
                         <p>67%</p>
                     </div>
                 </div>
             </div>
             <!-- 闪电 -->
             <div class="lightning">
                 <div class="lightning1">
                     <div class="sd1"></div>
                     <div class="jd1">
                         <ul class="cd">
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                         </ul>
                         <div class="box1"></div>
                         <div class="box2"></div>
                     </div>
                 </div>
                 <div class="lightning2">
                     <div class="sd2"></div>
                     <div class="jd2">
                         <ul class="cd">
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                         </ul>
                         <div class="box1"></div>
                         <div class="box2"></div>
                     </div>
                 </div>
             </div>
             <!-- top3 -->
             <div class="top3">
                 <ul>
                     <li>
                         <div class="title">NO.1</div>
                         <div class="content">
                             <p>80%</p>
                             <span>门店1</span>
                         </div>
                     </li>
                     <li>
                         <div class="title">NO.2</div>
                         <div class="content">
                             <p>80%</p>
                             <span>门店2</span>
                         </div>
                     </li>
                     <li>
                         <div class="title">NO.3</div>
                         <div class="content">
                             <p>80%</p>
                             <span>门店3</span>
                         </div>
                     </li>
                 </ul>
             </div>
         </div>
         <!-- 中间模块 -->
         <div class="main-middle">
             <div class="external1"></div>
             <div class="external2"></div>
             <div class="external3"></div>
             <div class="external4"></div>
             <!-- 加载 -->
             <div class="jz1">
                 <ul>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                 </ul>
             </div>
             <div class="jz2">
                 <ul>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                 </ul>
             </div>
             <!-- 内边框 -->
             <div class="inner1"></div>
             <div class="inner2"></div>
             <!-- 内加载箭头模块 -->
             <div class="arrow-l">
                 <ol>
                     <li></li>
                     <li></li>
                     <li></li>
                 </ol>
             </div>
             <div class="arrow-r">
                 <ol>
                     <li></li>
                     <li></li>
                     <li></li>
                 </ol>
             </div>
             <!-- 中间仪表图 -->
             <div class="meter"></div>
             <!-- 中间背景canvas -->
             <div class="animate"></div>
             <!-- 销售额 -->
             <div class="sale">
                 <p><span>销售额</span></p>
                 <p>
                    998678
 
                 </p>
             </div>
         </div>
         <!-- 右侧模块 -->
         <div class="main-right">
             <!-- 同比 -->
             <div class="compare">
                 <div class="compare-content">
                     <div class="rate2">
                         <h5><span>同比</span></h5>
                         <p>0.58</p>
                     </div>
                 </div>
             </div>
             <!-- 闪电 -->
             <div class="lightning">
                 <div class="lightning3">
                     <div class="jd3">
                         <ul class="cd">
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                         </ul>
                         <div class="box1"></div>
                         <div class="box2"></div>
                     </div>
                     <div class="sd3"></div>
                 </div>
                 <div class="lightning4">
                     <div class="jd4">
                         <ul class="cd">
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                             <li></li>
                         </ul>
                         <div class="box1"></div>
                         <div class="box2"></div>
                     </div>
                     <div class="sd4"></div>
                 </div>
             </div>
             <!-- top6 -->
             <div class="top6">
                 <ul>
                     <li>
                         <div class="title">NO.4</div>
                         <div class="content">
                             <p>80%</p>
                             <span>门店4</span>
                         </div>
                     </li>
                     <li>
                         <div class="title">NO.5</div>
                         <div class="content">
                             <p>80%</p>
                             <span>门店5</span>
                         </div>
                     </li>
                     <li>
                         <div class="title">NO.6</div>
                         <div class="content">
                             <p>80%</p>
                             <span>门店6</span>
                         </div>
                     </li>
                 </ul>
             </div>
         </div>
     </div>
     <!-- 底部模块 -->
     <div class="bottom">
         <div class="ul-box"  :style="{width: stuObj.width, 'animation-duration':stuObj.time }">
             <ul  >
                 <li  v-for="(item,index) in students "  :key="index">
                     <div class="li-content">
                         <p><span>{{item.name}}</span></p>
                         <p><span>{{item.totalAttendance}}</span></p>
                         <div class="li-box">
                             <div class="box1">
                                 <h5><span>出勤次数</span></h5>
                                 <div class="pic">
                                     <img src="./images/wc.png" alt="">
                                     <span>{{item.attendance}}</span>
                                 </div>
                             </div>
                             <div class="box2">
                                 <h5><span>出勤次数率</span></h5>
                                 <div class="pic">
                                     <img src="./images/zc.png" alt="">
                                     <span>{{((item.attendance/ item.attendance)*100).toFixed(2)}}%</span>
                                 </div>
                             </div>
                             <div class="box3">
                                 <h5><span>售罄率</span></h5>
                                 <div class="pic">
                                     <img src="./images/sq.png" alt="">
                                     <span>25.3%</span>
                                 </div>
                             </div>
                             <div class="box4">
                                 <h5><span>同比</span></h5>
                                 <div class="pic">
                                     <img src="./images/tb.png" alt="">
                                     <span>55.3%</span>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </li>
                 <!-- 复制一份 做无缝衔接滚动 -->
                 <li  v-for="(item,index) in students "  :key="index + students.length">
                     <div class="li-content">
                         <p><span>{{item.name}}</span></p>
                         <p><span>{{item.totalAttendance}}</span></p>
                         <div class="li-box">
                             <div class="box1">
                                 <h5><span>出勤次数</span></h5>
                                 <div class="pic">
                                     <img src="./images/wc.png" alt="">
                                     <span>{{item.attendance}}</span>
                                 </div>
                             </div>
                             <div class="box2">
                                 <h5><span>出勤次数率</span></h5>
                                 <div class="pic">
                                     <img src="./images/zc.png" alt="">
                                     <span>{{((item.attendance/ item.attendance)*100).toFixed(2)}}%</span>
                                 </div>
                             </div>
                             <div class="box3">
                                 <h5><span>售罄率</span></h5>
                                 <div class="pic">
                                     <img src="./images/sq.png" alt="">
                                     <span>25.3%</span>
                                 </div>
                             </div>
                             <div class="box4">
                                 <h5><span>同比</span></h5>
                                 <div class="pic">
                                     <img src="./images/tb.png" alt="">
                                     <span>55.3%</span>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </li>
          
             </ul>
         </div>
     </div>
    
    </div>
 </template>
 <script>
 //   import countTo from 'vue-count-to';
 
//  import  mixins from './mixins'
 
 export default {
//    mixins:[mixins],
   data(){
     return {
       students:[
         {
            name:'张三',
         //    实际出勤次数
            attendance: 300,
         //    应出勤次数
            totalAttendance: 500
         },
         {
            name:'李四',
         //    实际出勤次数
            attendance: 300,
         //    应出勤次数
            totalAttendance: 500
         },
         {
            name:'王五',
         //    实际出勤次数
            attendance: 300,
         //    应出勤次数
            totalAttendance: 500
         },
         {
            name:'张三1',
         //    实际出勤次数
            attendance: 300,
         //    应出勤次数
            totalAttendance: 500
         },
         {
            name:'李四2',
         //    实际出勤次数
            attendance: 300,
         //    应出勤次数
            totalAttendance: 500
         },
         {
            name:'王五133',
         //    实际出勤次数
            attendance: 300,
         //    应出勤次数
            totalAttendance: 500
         },
         {
            name:'张三15',
         //    实际出勤次数
            attendance: 300,
         //    应出勤次数
            totalAttendance: 500
         },
         {
            name:'李四16',
         //    实际出勤次数
            attendance: 300,
         //    应出勤次数
            totalAttendance: 500
         },
         {
            name:'王五abcccc',
         //    实际出勤次数
            attendance: 300,
         //    应出勤次数
            totalAttendance: 500
         },
       ]
     }
   },
   computed:{
     stuObj(){
         return {
             width: this.students.length * 2 * 560 + 'px',
             time:  this.students.length *2 +'s'
         }
     }
   }
 }
 </script>
 <style  lang="scss"  scoped>
 @import './css/style.css';
 
 .actiity {
     width: 100%;
     height: calc(100vh - 84px);
 }
 
 </style>